<template>
    <div class="bz-container">
        <div class="bz-cerebro">
            CEREBRO
        </div>
        <div class="bz-content-box">
            <div class="bz-box-left">
                <div class="bz-card bz-card-top">
                    <div class="bz-title-bar">
                        <div class="bz-icon">
                            <img src="../../assets/images/hxdp/img_title_ring.svg"
                                 class="bz-icon-ring bz-rotation-infinity" alt="">
                            <img src="../../assets/images/hxdp/icon_comp2.svg" alt="" class="bz-icon-bg">
                        </div>
                        <div class="bz-title">同业规模对比</div>
                    </div>
                    <div class="bz-card-body">
                        <div class="bz-tab">
                            <div class="bz-tab-item bz-active">
                                <div class="bz-name">ETF</div>
                            </div>
                            <div class="bz-tab-item">
                                <div class="bz-name">非货非理财</div>
                            </div>
                            <div class="bz-tab-item">
                                <div class="bz-name">权益类</div>
                            </div>
                            <div class="bz-tab-item">
                                <div class="bz-name">债券类</div>
                            </div>
                        </div>
                        <div class="bz-chart">
                            <div class="bz-tooltip-1">
                                <div class="bz-tp-title">易方达基金</div>
                                <div class="bz-item">
                                    <div class="bz-name">Q3披露总规模</div>
                                    <div class="bz-value">737.14亿元</div>
                                </div>
                                <div class="bz-item">
                                    <div class="bz-name">较Q2增长</div>
                                    <div class="bz-value">145.36亿元</div>
                                </div>
                                <div class="bz-item">
                                    <div class="bz-name">排名变化</div>
                                    <div class="bz-value">0</div>
                                </div>
                                <div class="bz-item">
                                    <div class="bz-name">与华夏差额</div>
                                    <div class="bz-value">+722.45亿元</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bz-card-foot">
                        <div class="bz-data-date">
                            数据披露日：2020-12-28
                        </div>
                    </div>
                </div>
                <div class="bz-card bz-card-bottom">
                    <div class="bz-title-bar">
                        <div class="bz-icon">
                            <img src="../../assets/images/hxdp/img_title_ring.svg"
                                 class="bz-icon-ring bz-rotation-infinity" alt="">
                            <img src="../../assets/images/hxdp/icon_comp.svg" alt="" class="bz-icon-bg">
                        </div>
                        <div class="bz-title">同业业绩对比</div>
                    </div>
                    <div class="bz-card-body">
                        <div class="bz-tab">
                            <div class="bz-tab-item bz-active">
                                <div class="bz-name">主动权益</div>
                            </div>
                            <div class="bz-tab-item">
                                <div class="bz-name">主动固收</div>
                            </div>
                        </div>
                        <div class="bz-chart-group">
                            <div class="bz-chart-lg">
                                <div class="bz-chart-pie"></div>
                                <div class="bz-ring bz-ring-1"></div>
                                <div class="bz-ring bz-ring-2"></div>
                                <div class="bz-ring bz-ring-3"></div>
                                <div class="bz-ring bz-ring-4"></div>
                                <div class="bz-list-panel">
                                    <div class="bz-tab-sm">
                                        <div class="bz-tab-sm-item bz-active">
                                            <div class="bz-name">四分位</div>
                                        </div>
                                        <div class="bz-tab-sm-item">
                                            <div class="bz-name">三分位</div>
                                        </div>
                                        <div class="bz-tab-sm-item">
                                            <div class="bz-name">10%</div>
                                        </div>
                                    </div>
                                    <div class="bz-sm-list">
                                        <ul>
                                            <li>
                                                <div class="bz-name-group">
                                                    <div class="bz-icon bz-icon-1"></div>
                                                    <div class="bz-name">25%</div>
                                                </div>
                                                <div class="bz-value">25只</div>
                                            </li>
                                            <li>
                                                <div class="bz-name-group">
                                                    <div class="bz-icon bz-icon-2"></div>
                                                    <div class="bz-name">50%</div>
                                                </div>
                                                <div class="bz-value">30只</div>
                                            </li>
                                            <li>
                                                <div class="bz-name-group">
                                                    <div class="bz-icon bz-icon-3"></div>
                                                    <div class="bz-name">75%</div>
                                                </div>
                                                <div class="bz-value">65只</div>
                                            </li>
                                            <li>
                                                <div class="bz-name-group">
                                                    <div class="bz-icon bz-icon-4"></div>
                                                    <div class="bz-name">100%</div>
                                                </div>
                                                <div class="bz-value">5只</div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="bz-chart-sm">
                                <div class="bz-chart-pie-sm"></div>
                                <div class="bz-chart-pie-sm"></div>
                                <div class="bz-chart-pie-sm"></div>
                                <div class="bz-chart-pie-sm"></div>
                            </div>
                        </div>
                    </div>
                    <div class="bz-card-foot">
                        <div class="bz-data-date">
                            数据披露日：2020-12-28
                        </div>
                    </div>
                </div>
            </div>
            <div class="bz-box-center">
                <img src="../../assets/images/hxdp/img_kedu.svg" alt="" class="bz-kedu">
                <div class="bz-chcar-3dbar">3dbar</div>
                <div class="bz-box-bottom">
                    <div class="bz-total-box">
                        <div class="bz-card">
                            <div class="bz-split"></div>
                            <div class="bz-content bz-bg-l">
                                <div class="bz-li">
                                    <div class="bz-num">114611.54</div>
                                    <div class="bz-unit">亿元</div>
                                </div>
                                <div class="bz-name">
                                    总规模
                                </div>
                            </div>
                        </div>
                        <div class="bz-card">
                            <div class="bz-split"></div>
                            <div class="bz-content bz-bg-r">
                                <div class="bz-li">
                                    <div class="bz-num">3.25</div>
                                    <div class="bz-unit">亿元</div>
                                </div>
                                <div class="bz-name">
                                    本年规模增量
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bz-list-box">
                        <div class="bz-left-list">
                            <div class="bz-list-li">
                                <div class="bz-dot"></div>
                                <div class="bz-li-content">
                                    <div class="bz-title">个人客户总数</div>
                                    <div class="bz-num">12.83万人</div>
                                </div>
                            </div>
                            <div class="bz-list-li">
                                <div class="bz-dot"></div>
                                <div class="bz-li-content">
                                    <div class="bz-title">个人客户总数</div>
                                    <div class="bz-num">12.83万人</div>
                                </div>
                            </div>
                            <div class="bz-split"></div>
                            <div class="bz-list-li">
                                <div class="bz-dot"></div>
                                <div class="bz-li-content">
                                    <div class="bz-title">个人客户总数</div>
                                    <div class="bz-num">12.83万人</div>
                                </div>
                            </div>
                            <div class="bz-list-li">
                                <div class="bz-dot"></div>
                                <div class="bz-li-content">
                                    <div class="bz-title">个人客户总数</div>
                                    <div class="bz-num">12.83万人</div>
                                </div>
                            </div>
                            <div class="bz-data-mata">
                                <div class="bz-dotted"></div>
                                <div class="bz-data-date">
                                    数据披露日：2020-12-28
                                </div>
                            </div>
                        </div>
                        <div class="bz-right-box">
                            <div class="bz-dotted"></div>
                            <div class="bz-chart-random"></div>
                        </div>
                    </div>
                    <div class="bz-decor-l"></div>
                    <div class="bz-decor-r"></div>
                </div>
            </div>
            <div class="bz-box-right">
                <div class="bz-title-bar">
                    <div class="bz-icon">
                        <img src="../../assets/images/hxdp/img_title_ring.svg"
                             class="bz-icon-ring bz-rotation-infinity" alt="">
                        <img src="../../assets/images/hxdp/icon_info.svg" alt="" class="bz-icon-bg">
                    </div>
                    <div class="bz-title">信息资讯</div>
                </div>
                <div class="bz-card">
                    <div class="bz-card-head">
                        <div class="bz-title">新闻资讯</div>
                        <div class="bz-split"></div>
                    </div>
                    <div class="bz-card-body">
                        <ul class="bz-list-group">
                            <li class="bz-li bz-li-odd">
                                <div class="bz-title-group">
                                    <div class="bz-dotted"></div>
                                    <div class="bz-title">
                                        2019年度企业债券主承销商和信用评级机构信用…
                                    </div>
                                </div>
                            </li>
                            <li class="bz-li">
                                <div class="bz-title-group">
                                    <div class="bz-dotted"></div>
                                    <div class="bz-title">
                                        深圳市副市长艾学峰莅临公司调研
                                    </div>
                                </div>
                            </li>
                            <li class="bz-li bz-li-odd">
                                <div class="bz-title-group">
                                    <div class="bz-dotted"></div>
                                    <div class="bz-title">
                                        2019年度企业债券主承销商和信用评级机构信用…
                                    </div>
                                </div>
                            </li>
                            <li class="bz-li">
                                <div class="bz-title-group">
                                    <div class="bz-dotted"></div>
                                    <div class="bz-title">
                                        深圳市副市长艾学峰莅临公司调研
                                    </div>
                                </div>
                            </li>
                            <li class="bz-li bz-li-odd">
                                <div class="bz-title-group">
                                    <div class="bz-dotted"></div>
                                    <div class="bz-title">
                                        2019年度企业债券主承销商和信用评级机构信用…
                                    </div>
                                </div>
                            </li>
                            <li class="bz-li">
                                <div class="bz-title-group">
                                    <div class="bz-dotted"></div>
                                    <div class="bz-title">
                                        深圳市副市长艾学峰莅临公司调研
                                    </div>
                                </div>
                            </li>
                            <li class="bz-li bz-li-odd">
                                <div class="bz-title-group">
                                    <div class="bz-dotted"></div>
                                    <div class="bz-title">
                                        2019年度企业债券主承销商和信用评级机构信用…
                                    </div>
                                </div>
                            </li>
                            <li class="bz-li">
                                <div class="bz-title-group">
                                    <div class="bz-dotted"></div>
                                    <div class="bz-title">
                                        深圳市副市长艾学峰莅临公司调研
                                    </div>
                                </div>
                            </li>
                            <li class="bz-li bz-li-odd">
                                <div class="bz-title-group">
                                    <div class="bz-dotted"></div>
                                    <div class="bz-title">
                                        2019年度企业债券主承销商和信用评级机构信用…
                                    </div>
                                </div>
                            </li>
                            <li class="bz-li">
                                <div class="bz-title-group">
                                    <div class="bz-dotted"></div>
                                    <div class="bz-title">
                                        深圳市副市长艾学峰莅临公司调研
                                    </div>
                                </div>
                            </li>
                            <li class="bz-li bz-li-odd">
                                <div class="bz-title-group">
                                    <div class="bz-dotted"></div>
                                    <div class="bz-title">
                                        2019年度企业债券主承销商和信用评级机构信用…
                                    </div>
                                </div>
                            </li>
                            <li class="bz-li">
                                <div class="bz-title-group">
                                    <div class="bz-dotted"></div>
                                    <div class="bz-title">
                                        深圳市副市长艾学峰莅临公司调研
                                    </div>
                                </div>
                            </li>
                            <li class="bz-li bz-li-odd">
                                <div class="bz-title-group">
                                    <div class="bz-dotted"></div>
                                    <div class="bz-title">
                                        2019年度企业债券主承销商和信用评级机构信用…
                                    </div>
                                </div>
                            </li>
                            <li class="bz-li">
                                <div class="bz-title-group">
                                    <div class="bz-dotted"></div>
                                    <div class="bz-title">
                                        深圳市副市长艾学峰莅临公司调研
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="bz-card">
                    <div class="bz-card-head">
                        <div class="bz-title">公众号监控</div>
                        <div class="bz-split"></div>
                    </div>
                    <div class="bz-card-body">
                        <ul class="bz-list-group">
                            <li class="bz-li bz-li-odd">
                                <div class="bz-title-group">
                                    <div class="bz-dotted"></div>
                                    <div class="bz-title">2019年度企业债券主承销商和信用评级机构信用…
                                    </div>
                                </div>
                            </li>
                            <li class="bz-li">
                                <div class="bz-title-group">
                                    <div class="bz-dotted"></div>
                                    <div class="bz-title">
                                        深圳市副市长艾学峰莅临公司调研
                                    </div>
                                </div>
                            </li>
                            <li class="bz-li bz-li-odd">
                                <div class="bz-title-group">
                                    <div class="bz-dotted"></div>
                                    <div class="bz-title">
                                        2019年度企业债券主承销商和信用评级机构信用…
                                    </div>
                                </div>
                            </li>
                            <li class="bz-li">
                                <div class="bz-title-group">
                                    <div class="bz-dotted"></div>
                                    <div class="bz-title">
                                        深圳市副市长艾学峰莅临公司调研
                                    </div>
                                </div>
                            </li>
                            <li class="bz-li bz-li-odd">
                                <div class="bz-title-group">
                                    <div class="bz-dotted"></div>
                                    <div class="bz-title">
                                        2019年度企业债券主承销商和信用评级机构信用…
                                    </div>
                                </div>
                            </li>
                            <li class="bz-li">
                                <div class="bz-title-group">
                                    <div class="bz-dotted"></div>
                                    <div class="bz-title">
                                        深圳市副市长艾学峰莅临公司调研
                                    </div>
                                </div>
                            </li>
                            <li class="bz-li bz-li-odd">
                                <div class="bz-title-group">
                                    <div class="bz-dotted"></div>
                                    <div class="bz-title">
                                        2019年度企业债券主承销商和信用评级机构信用…
                                    </div>
                                </div>
                            </li>
                            <li class="bz-li">
                                <div class="bz-title-group">
                                    <div class="bz-dotted"></div>
                                    <div class="bz-title">
                                        深圳市副市长艾学峰莅临公司调研
                                    </div>
                                </div>
                            </li>
                            <li class="bz-li bz-li-odd">
                                <div class="bz-title-group">
                                    <div class="bz-dotted"></div>
                                    <div class="bz-title">
                                        2019年度企业债券主承销商和信用评级机构信用…
                                    </div>
                                </div>
                            </li>
                            <li class="bz-li">
                                <div class="bz-title-group">
                                    <div class="bz-dotted"></div>
                                    <div class="bz-title">
                                        深圳市副市长艾学峰莅临公司调研
                                    </div>
                                </div>
                            </li>
                            <li class="bz-li bz-li-odd">
                                <div class="bz-title-group">
                                    <div class="bz-dotted"></div>
                                    <div class="bz-title">
                                        2019年度企业债券主承销商和信用评级机构信用…
                                    </div>
                                </div>
                            </li>
                            <li class="bz-li">
                                <div class="bz-title-group">
                                    <div class="bz-dotted"></div>
                                    <div class="bz-title">
                                        深圳市副市长艾学峰莅临公司调研
                                    </div>
                                </div>
                            </li>
                            <li class="bz-li bz-li-odd">
                                <div class="bz-title-group">
                                    <div class="bz-dotted"></div>
                                    <div class="bz-title">
                                        2019年度企业债券主承销商和信用评级机构信用…
                                    </div>
                                </div>
                            </li>
                            <li class="bz-li">
                                <div class="bz-title-group">
                                    <div class="bz-dotted"></div>
                                    <div class="bz-title">
                                        深圳市副市长艾学峰莅临公司调研
                                    </div>
                                </div>
                            </li>
                            <li class="bz-li bz-li-odd">
                                <div class="bz-title-group">
                                    <div class="bz-dotted"></div>
                                    <div class="bz-title">
                                        2019年度企业债券主承销商和信用评级机构信用…
                                    </div>
                                </div>
                            </li>
                            <li class="bz-li">
                                <div class="bz-title-group">
                                    <div class="bz-dotted"></div>
                                    <div class="bz-title">
                                        深圳市副市长艾学峰莅临公司调研
                                    </div>
                                </div>
                            </li>
                            <li class="bz-li bz-li-odd">
                                <div class="bz-title-group">
                                    <div class="bz-dotted"></div>
                                    <div class="bz-title">
                                        2019年度企业债券主承销商和信用评级机构信用…
                                    </div>
                                </div>
                            </li>
                            <li class="bz-li">
                                <div class="bz-title-group">
                                    <div class="bz-dotted"></div>
                                    <div class="bz-title">
                                        深圳市副市长艾学峰莅临公司调研
                                    </div>
                                </div>
                            </li>
                            <li class="bz-li bz-li-odd">
                                <div class="bz-title-group">
                                    <div class="bz-dotted"></div>
                                    <div class="bz-title">
                                        2019年度企业债券主承销商和信用评级机构信用…
                                    </div>
                                </div>
                            </li>
                            <li class="bz-li">
                                <div class="bz-title-group">
                                    <div class="bz-dotted"></div>
                                    <div class="bz-title">
                                        深圳市副市长艾学峰莅临公司调研
                                    </div>
                                </div>
                            </li>

                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Hxdp',
        mounted() {
            let UZ_PAGE = (function () {
                let _box_width = 1920;
                return {
                    onresize: function () {
                        let _that = this;
                        window.onresize = function () {
                            _that.resizeBody();
                        }
                        _that.resizeBody();
                        return this;
                    }
                    , resizeBody: function () {
                        let screen_width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
                        let screen_height = window.innerHeight || document.documentElement.clientWidth || document.body.clientHeight;
                        document.querySelector('body').style.zoom = screen_width / _box_width;
                    }
                }
            })().onresize();
        }
    };
</script>
<style lang="less" scoped>
    /*@import '../../assets/style/hxdp.less';*/
</style>
